<template>
  <div class="setting container">
    <van-nav-bar title="设置" left-arrow @click-left="$router.back()" />
    <main>
      <van-cell-group inset>
        <van-cell title="账号管理" icon="user-o" is-link>
          <template #right-icon>
            <img class="userImg" :src="$store.state.myUserInfo.src" />
          </template>
        </van-cell>
        <van-cell title="修改密码" icon="info-o" is-link />
        <van-cell title="消息设置" icon="chat-o" is-link />
        <van-cell title="隐私设置" icon="closed-eye" is-link />
        <van-cell title="账户安全" icon="shield-o" is-link />
        <van-cell title="夜间模式" icon="exchange" is-link />
        <van-cell title="退出登陆" @click="removeUserInfo" icon="revoke" is-link />
      </van-cell-group>
    </main>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'YscShopSetting',

  data () {
    return {

    };
  },

  mounted () {

  },

  methods: {
    ...mapMutations(['setUserInfo']),
    // 退出登陆
    removeUserInfo () {
      // 清除本地存储与vuex
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      window.localStorage.removeItem('userInfo');
      this.setUserInfo({
        // 是否登陆
        active: false,
        phone: '',
        name: '请先登陆',
        password: '',
        sasuke: '请先登陆',
        date: '',
        src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp290307260.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654931569&t=17d80a6df404cbf39cfcb69c5756b1c0',
        // 收藏
        collect: [],
        // 优惠券
        coupon: [],
        // 我的足迹
        footprint: []
      })
    }
  },
};
</script>

<style lang="less" scoped>
.van-cell-group {
  margin-top: 20px;
  .van-cell {
    display: flex;
    align-items: center;
    .userImg {
      width: 40px;
      border-radius: 50%;
    }
  }
  .van-cell:first-child {
    padding-bottom: 20px;
  }
  .van-cell:nth-child(n + 2) {
    margin-top: 5px;
  }
}
</style>